<template>
  <div class="index-menu-box" v-show="data.isShowMenu">
    <div class="index-menu-box">
      <!-- 本地路由菜单 -->
      <el-scrollbar>
        <div class="index-menu">
          <el-menu
            router
            unique-opened
            :collapse-transition="false"
            :default-active="data.defaultActive"
            :collapse="isCollapse"
            class="el-menu-vertical-demo"
            text-color="#FFFFFF"
            active-text-color="#FFFFFF"
          >
            <template v-for="(item, index) in data.routerList">
              <!-- 没有子路由 -->
              <template v-if="item.meta.isMenu && !item.children">
                <el-menu-item :index="item.path" @click="navClick(item)" v-if="!item.meta.isNotRouter">
                  <!-- <el-icon size="14"><Setting /></el-icon> -->
                  <template #title>{{ item.meta.title }}</template>
                  
                </el-menu-item>
                <el-menu-item @click="navClick(item)" v-if="item.meta.isNotRouter">
                  <el-icon size="14"><Setting /></el-icon>
                  <template #title>{{ item.meta.title }}</template>
                </el-menu-item>
              </template>
              <!-- 有子路由 -->
              <el-sub-menu v-if="item.meta.isMenu && item.children" :index="item.path">
                <template #title>
                  <!-- <el-icon size="14"><Setting /></el-icon> -->
                  <span>{{ item.meta.title }}</span>
                </template>
                <div v-for="(itemChildren, indexChildren) in item.children" :key="itemChildren.path">
                  <el-menu-item
                    :index="itemChildren.path"
                    @click="navClick(itemChildren)"
                    v-if="itemChildren.meta.isMenu && !itemChildren.meta.isNotRouter"
                  >
                    {{ itemChildren.meta.title }}
                  </el-menu-item>
                  <el-menu-item @click="navClick(itemChildren)" v-if="itemChildren.meta.isMenu && itemChildren.meta.isNotRouter">
                    {{ itemChildren.meta.title }}
                  </el-menu-item>
                </div>
              </el-sub-menu>
            </template>
          </el-menu>
        </div>
      </el-scrollbar>
    </div>
    <!-- <div class="index-menu-bottom">
      <img class="index-menu-bottom-img" src="@/assets/images/menu.png" alt="" @click="isCollapse = !isCollapse" />
    </div> -->
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import useStore from "@/store/store.js";
const store = useStore();
const { proxy } = getCurrentInstance();

const isCollapse = ref(false);
const data = reactive({
  defaultActive: "",
  isShowMenu: false, //是否显示菜单
  routerList: [],
});
// 本地路由数据
const router = useRouter();
// console.log("路由信息", router);
let allRoutes = router.options.routes;
let navRoutes = [];
for (let item of allRoutes) {
  if (item.meta && item.meta.isNav) {
    navRoutes = item.children;
    break;
  }
}
data.routerList = navRoutes.filter((item) => {
  return item.meta && item.meta.isMenu; // 过滤菜单
});
// console.log("处理后的路由信息", data.routerList);

watch(
  () => router.currentRoute.value.path,
  (newValue, oldValue) => {
    data.defaultActive = router.currentRoute.value.path;
    // console.log('当前路由', data.defaultActive);
    if (router.currentRoute.value.path === "/") return;
    if (router.currentRoute.value.meta.isIndependent) {
      // console.log('大屏项目首页');
      data.isShowMenu = false;
      store.isHeader = false;
    } else {
      // console.log('非大屏项目首页');
      data.isShowMenu = true;
      store.isHeader = true;
    }
  },
  {
    immediate: true,
  }
);
// 点击菜单
const navClick = (el) => {
  data.defaultActive = el.path;
};
// 处理本地图片路径（如果有图标）
const setImageUrl = computed(() => (image) => {
  return `./src/assets/images/menuIcon${image}`;
});
</script>

<style lang="scss">
// 左侧导航
.index-menu-box {
  height: 100%;
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  // 导航栏
  .index-menu-box {
    flex: 1;
    min-height: 0;
    // width: var(--el-menu-width);
    box-sizing: border-box;
    overflow: hidden;
    background-color: #0A334A;
    display: flex;
  }
  .index-menu {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 8px;
    background-color: #0A334A;
  }
  .index-menu-bottom {
    display: flex;
    height: 56px;
    padding: 14px 16px;
    box-sizing: border-box;
    align-items: center;
    border-top: 1px solid var(--border-color);
    .index-menu-bottom-img {
      width: 16px;
      height: 16px;
      cursor: pointer;
      margin-left: 15px;
    }
  }
  .el-menu-item:hover,
  .el-sub-menu__title:hover {
    background-color: #00B5AD !important;
  }
  .el-menu{
        background-color: #0A334A;
  }
  .el-menu--vertical {
    width: calc(var(--el-menu-width) - 16px) !important;
  }
  .el-menu--collapse {
    width: calc(var(--el-menu-icon-width) + var(--el-menu-base-level-padding) * 2) !important;
  }
  .el-menu-item.is-active {
    background-color:#00B5AD  !important;
  }
  .el-sub-menu.is-active .el-sub-menu__title {
    color:#FFFFFF !important;
  }
}
</style>
